<template>
  <div class="">
    <el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :unique-opened="true"
      :router="true"
    >
      <el-submenu
        :index="index + ''"
        v-for="(menu, index) in menuConfig"
        :key="index"
      >
        <template slot="title">
          <i :class="menu.icon"></i>
          <span>{{ menu.title }}</span>
        </template>
        <el-menu-item
          v-for="(submenu, sidx) in menu.subs"
          :key="sidx"
          :index="'/homePage'+submenu.path"
          >{{ submenu.title }}</el-menu-item
        >
      </el-submenu>
    </el-menu>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      menuConfig: [
        {
          title: "商品管理",
          icon: "el-icon-setting",
          subs: [
            { title: "商品列表", path: "/good" },
            { title: "商品分类", path: "/category" },
            { title: "品牌管理", path: "/brand" },
            { title: "商品属性管理", path: "/attribute" },
          ],
        },
        {
          title: "订单中心",
          icon: "el-icon-setting",
          subs: [{ title: "订单列表", path: "/order" }],
        },
        {
          title: "店铺运营",
          icon: "el-icon-setting",
          subs: [
            { title: "专题管理", path: "/topic" },
            { title: "运营数据", path: "/statdata" },
          ],
        },
      ],
    };
  },
created(){
//  let menu=this.$store.state.menu
//  console.log(menu);
//   //把用户权限转换成对象
//  let menuObj= menu.reduce((prev,current)=>{
//     let key=current.path
//     let value=true
//     prev[key]=value
//     return prev
//   },{})
//   let newMenuConfig=[]
//   //循环完整的菜单配置数组
//   for(let i=0;i<this.menuConfig.length;i++){
//     let subs=[]
//     for(let j=0;j<this.menuConfig[i].subs.length;j++){
//       let sub=this.menuConfig[i].subs[j];
//       if(menuObj[sub.path]){
//         subs.push(sub)
//       }
//     }
//     if(subs.length>0){
//       newMenuConfig.push({
//         ...this.menuConfig[i],subs
//       })
//     }
//   }
//   this.menuConfig=newMenuConfig
 let menu = this.$store.state.menu;
    console.log(menu);
    let menuObj = menu.reduce((prev, current) => {
      let key = current.path;
      let value = true;
      prev[key] = value;
      return prev
    }, {});
    let newMenuConfig = [] // 当前用户的菜单配置
    for (let i = 0; i < this.menuConfig.length; i++) {
      // 一级菜单
      let subs = []
      for (let j = 0; j < this.menuConfig[i].subs.length; j++) {
        // 二级菜单
        let sub = this.menuConfig[i].subs[j]
        if(menuObj[sub.path]) {
          subs.push(sub)
        }
      }
      if(subs.length > 0) {
        newMenuConfig.push({...this.menuConfig[i], subs})
      }
    }
    // 替换
    this.menuConfig = newMenuConfig;
   
}
};
</script>
 
<style lang = "less" scoped>
</style>